﻿<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <title>AIN BLOG —— 秘 境</title>
    <!--Main style css-->
    <link th:href="@{/static/assets/css/style.css}" rel="stylesheet">
    <!--Active Color css-->
    <link th:href="@{/static/assets/css/colors/default-colors.css}" rel="stylesheet">
    <!--Responsive style css-->
    <link th:href="@{/static/assets/css/responsive.css}" rel="stylesheet">
    <!-- JS -->
    <!--jQuery 1.12.4 google link-->
    <script th:src="@{/static/assets/js/jquery.min.js}"></script>
</head>
<body class="bodypadding">
<!--快速返回顶层-->
<div class="scroll_up gutengard_btn"><i class="icon-up-open-big"></i></div><!--END ScrollTop Btn-->
<!--搜索框引入-->
<div th:replace="../templates/commons/search::#main_search"></div>
<!--侧边框引入-->
<div th:replace="../templates/commons/floatBar::#main_floatBar"></div>
<!--导航栏引入-->
<div th:replace="../templates/commons/header::#main_header"></div>
<!--顶部图片-->
<div class="page_header header_image box_overlay d-flex align_items_center justify_content_center"
     th:style="'background-image: url('+${userModel.photo}+')'">
    <h1 class="cat_title">作 者 相 关</h1>
    <div style="position: absolute;top: 60%;color: #fff;font-size: 30px;font-family: Courier New;letter-spacing: 1px;">About the author</div>

</div><!--END Page header-->

<div class="page_container_wrapper">
    <div class="container no_padding">
        <div class="row">
            <!-- 作者头像 -->
            <div class="col-lg-5 text-center">
                <a class="popupimg hover_light scrollanimation" data-animation="fadeInUp" data-timeout="200" th:href="${userModel.avatar}">
                    <img alt="" th:src="${userModel.avatar}">
                </a>
            </div>
            <!--笔者小话-->
            <div class="col-lg-7 align-self-center">
                <div class="about_box">
                    <div class="heading-title">作者</div>
                    <p style="text-indent: 2em;">[[${userModel.nickName}]]</p>
                </div>
                <div class="about_box">
                    <div class="heading-title">小话</div>
                    <p style="font-size: 21px;letter-spacing: 1px;text-indent: 2em;">
                        [[${userModel.essay}]]
                    </p>
                    <br>
                </div>
            </div>
        </div>
    </div>
</div>

<!--引入尾部之前的图片横栏-->
<div th:replace="../templates/commons/beforeFooter::#main_beforeFooter"></div>
<!--引入尾部-->
<div th:replace="../templates/commons/footer::#main_footer"></div>

<!--Bootstrap 4.1.0-->
<script th:src="@{/static/assets/libs/bootstrap-4.1.0/bootstrap.min.js}"></script>
<!--jquery.magnific-popup-->
<script th:src="@{/static/assets/libs/jquery.magnific-popup/jquery.magnific-popup.min.js}"></script>
<!--OWL Carousel-->
<script th:src="@{/static/assets/libs/owlcarousel2-2.3.4/owl.carousel.min.js}"></script>
<!--Custom js-->
<script th:src="@{/static/assets/js/custom.js}"></script>

</body>
</html>